{# started.twig #}
{% extends "layout.twig" %}

{% block subHeader %}
<h2 class="sub-header-tit">GET STARTED</h2>
<div class="sub-header-content">
    <p class="sub-header-txt">XEIcon 사용방법은 매우 간단합니다. 자신의 웹사이트에 단 두 줄만 추가하는 것으로 바로 사용할 수 있습니다.<br>XEIcon과 함께라면 더욱 멋지고 빠르게 프로젝트를 완성할 수 있습니다.</p>
</div>
<img src="assets/img/img_started.png" class="sub-spot-img">
{% endblock %}


{% block page %}
<div class="container sub-contents-container">
    <div class="sub-section sub-started">
        <h3 class="sub-section-tit" id="installation">설치(Installation)</h3>
        <hr class="half-rule">
        <h4 class="sub-section-sub-tit" id="cdn">가장 쉬운 방법(Easiest) : CDN by jsDelivr</h4>
        <p class="sub-section-info">CDN을 사용하면 한 줄의 코드로 XEIcon을 사용할 수 있습니다. 파일을 다운로드하거나 설치할 필요가 없습니다.</p>
        <ul class="desc-box">
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. 사이트 <span class="deco-box">&lt;head&gt;</span> 태그 안에 아래의 코드를 붙입니다.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;//cdn.jsdelivr.net/gh/xpressengine/xeicon@{{ versions[0] }}/xeicon.min.css&quot;&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p>2. <a href="examples.html">examples</a>페이지를 참조하여 XEIcon을 웹페이지에 적용합니다.</p>
                    </li>
                </ol>
            </li>
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. Paste the following code into the <span class="deco-box">&lt;head&gt;</span> section of your site&rsquo;s HTML.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;//cdn.jsdelivr.net/gh/xpressengine/xeicon@{{ versions[0] }}/xeicon.min.css&quot;&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p>2. check out the <a href="examples.html">examples</a> to start using XEIcon!</p>
                    </li>
                </ol>
            </li>
        </ul>

        <h4 class="sub-section-sub-tit">쉬운 방법(Easy) : Import CSS</h4>
        <p class="sub-section-info">폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.</p>
        <ul class="desc-box">
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. XEIcon 홈페이지에서 XEIcon을 다운로드 받습니다.</p>
                    </li>
                    <li>
                        <p class="desc-txt">2. XEIcon이라는 폴더명으로 자신의 웹사이트에 복사합니다.</p>
                    </li>
                    <li>
                        <p class="desc-txt">3. html <span class="deco-box">&lt;head&gt;</span> 태그 안에 xeicon.min.css 파일 위치를 아래와 같이 가져옵니다.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;link =&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;path/to/xeicon/xeicon.min.css&quot;&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">4. <a href="library_common.html">XEIcon 라이브러리</a>를 사용해서 XEIcon을 프로젝트에 적용합니다.</p>
                    </li>
                </ol>
            </li>
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. Copy the entire XEIcon directory into your project.</p>
                    </li>
                    <li>
                        <p class="desc-txt">2. In the of your html, reference the location to your xeicon.min.css.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;link =&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;path/to/xeicon/xeicon.min.css&quot;&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">3. check out the <a href="library_common.html">XEIcon Library</a> to start using XEIcon!</p>
                    </li>
                </ol>
            </li>
        </ul>

        <h4 class="sub-section-sub-tit" id="bower">Bower를 통한 설치 : Install with Bower</h4>
        <ul class="desc-box">
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. 웹 패키지 관리도구 Bower 사용자 설치 방법입니다. 터미널에 아래 명령어를 입력하여 인스톨할 수 있습니다.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>bower install xeicon</code><br><code>bower install xeicon#&lt;version&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">2. 자세한 설치방법은 <a href="http://bower.io/docs/api/#install" target="_blank">Bower 홈페이지</a>를 참고하시기 바랍니다.</p>
                    </li>
                </ol>
            </li>
            <li>
                <ol>c
                    <li>
                        <p class="desc-txt">1. Once you have bower installed, open up Terminal (or Command Prompt) and enter the following command:</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>bower install xeicon</code><br><code>bower install xeicon#&lt;version&gt;</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">2. You can read more about installation on <a href="http://bower.io/docs/api/#install" target="_blank">Bower homepage</a>.</p>
                    </li>
                </ol>
            </li>
        </ul>
    </div>

    <div class="sub-section sub-started">
        <h3 class="sub-section-tit" id="use">사용방법(How to use)</h3>
        <hr class="half-rule">
        <p>XEIcon은 두가지 방법으로 웹에 적용할 수 있습니다. 적용과 설정 방법은 아래와 같습니다.</p>
        <h4 class="sub-section-sub-tit" id="tag">Html tag</h4>
        <ul class="desc-box">
            <li>
                <p class="desc-txt">간단하게 <span class="deco-box">&lt;i&gt;</span> 태그를 웹페이지에 써서 쓸 수 있습니다.</p>
                <div class="desc-code-box">
                    <p class="desc-code"><code>&lt;i class=&quot;xi-xpressengine&quot;&gt;&lt;/i&gt; = <i class="xi-xpressengine"></i></code></p>
                </div>
            </li>
            <li>
                <p class="desc-txt">You can use a simple <span class="deco-box">&lt;i&gt;</span> tag to place an icon in your page, like this:</p>
                <div class="desc-code-box">
                    <p class="desc-code"><code>&lt;i class=&quot;xi-xpressengine&quot;&gt;&lt;/i&gt; = <i class="xi-xpressengine"></i></code></p>
                </div>
            </li>
        </ul>

        <h4 class="sub-section-sub-tit" id="unicode">Unicode HTML Entity</h4>
        <p class="sub-section-info">폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.</p>
        <ul class="desc-box">
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. 유니코드로 XEIcon을 적용하려면, CSS에서 XEIcon을 불러와야 합니다.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>span.icon {font-family : xeicon;}</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">2. 다음으로 html에 유니코드를 삽입합니다.</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;span class=&quot;icon&quot;&gt;&amp;#ec2e;&lt;/span&gt;</code></p>
                        </div>
                    </li>
                </ol>
            </li>
            <li>
                <ol>
                    <li>
                        <p class="desc-txt">1. Specifying the xeicon web-font in a CSS rule with <span class="deco-box">&lt;font-family&gt;</span></p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>span.icon {font-family : xeicon;}</code></p>
                        </div>
                    </li>
                    <li>
                        <p class="desc-txt">2. Using the Unicode HTML Entity to display the icon</p>
                        <div class="desc-code-box">
                            <p class="desc-code"><code>&lt;span class=&quot;icon&quot;&gt;&amp;#ec2e;&lt;/span&gt;</code></p>
                        </div>
                    </li>
                </ol>
            </li>
        </ul>
        <div class="notice-txt-area">
            <p>Note : 이 방법은 더 유연하게 사용할 수 있습니다. 예를들어, &lt;div&gt;, &lt;span&gt;과 같은 태그를 &lt;i&gt;태그 대신에 쓸 수 있습니다.</p>
            <p>Note : This method may offer you more flexibility. for example, you could use a &lt;div&gt; or &lt;span&gt; tags instead of a &lt;i&gt;tag.</p>
        </div>
    </div>

</div>
{% endblock %}